<template>
  <a-drawer  :maskClosable="false" :visible="vdata.visible" :title="'操作记录'"
    :body-style="{ paddingBottom: '80px' }" width="40%" @close="onClose">
    
    <!-- 列表渲染 -->
    <a-table ref="infoTable" :dataSource="vdata.isvList" :columns="tableColumns"
      rowKey="index" :pagination="false">

      <template #bodyCell="{text, column, record }">
        <template v-if="column.key === 'operation'">
          <!-- 操作列插槽 -->
          <GzTableColumns>
            <a-button type="link" @click="viewFun(record.id)">查看</a-button>
          </GzTableColumns>
        </template>
      </template>
    </a-table>
  </a-drawer>

  <a-modal v-model:visible="vdata.modalVisible" title="操作记录明细">
    <div v-if="!(!vdata.detialObj.editBefore || JSON.stringify(vdata.detialObj.editBefore)=='{}')" style="margin-bottom: 20px;">
      <a-button style="margin-bottom: 10px;">修改前</a-button>
      <a-descriptions  layout="vertical" bordered :column="4">
        <a-descriptions-item label="商圈类型编号">{{ vdata.detialObj.editBefore.sqlxNo }}</a-descriptions-item>
        <a-descriptions-item label="类型名称">{{vdata.detialObj.editBefore.sqlxName}}</a-descriptions-item>
        <a-descriptions-item label="操作人">{{vdata.detialObj.editBefore.updatePer}}</a-descriptions-item>
        <a-descriptions-item label="是否启用">{{vdata.detialObj.editBefore.state}}</a-descriptions-item>
      </a-descriptions>
    </div>
    <a-button style="margin-bottom: 10px;">{{!(!vdata.detialObj.editBefore || JSON.stringify(vdata.detialObj.editBefore)=='{}')?'修改后':'创建以下商圈类型'}}</a-button>
    <a-descriptions  layout="vertical" bordered :column="4">
      <a-descriptions-item label="商圈类型编号">{{vdata.detialObj.editAfter.sqlxNo}}</a-descriptions-item>
      <a-descriptions-item label="类型名称">{{vdata.detialObj.editAfter.sqlxName}}</a-descriptions-item>
      <a-descriptions-item label="操作人">{{vdata.detialObj.editAfter.updatePer}}</a-descriptions-item>
      <a-descriptions-item label="是否启用">{{vdata.detialObj.editAfter.state}}</a-descriptions-item>
    </a-descriptions>
    <template #footer>
        <a-button key="back" type="primary" @click="vdata.modalVisible=false">确定</a-button>
      </template>
  </a-modal>
</template>

<script setup lang="ts" >
import { API_URL_AGENTISV_ADDBATCH, API_URL_AGENTISV_UPDATEBATCH, API_URL_AGENTISV_LIST, API_URL_IsvInfo_Channel, req } from '@/api/manage'
import { ref, unref, reactive, getCurrentInstance, onMounted, defineProps, defineExpose } from 'vue'

// 导入全局函数
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// 组件
const infoFormModel = ref()


// 定义函数
const props = defineProps({
  callbackFunc: { type: Function, default: null }
})

// infoTable组件
const infoTable = ref()

// eslint-disable-next-line no-unused-vars
const tableColumns = ref([
  { title: '序号', dataIndex: 'index',width: 50, 
    customRender: ({ index }: { index: number }) => {
        return `${index + 1}`
    },
  },
  { key: 'updateTime', title: '操作时间', dataIndex: 'updateTime', width: 100, minWidth: 100, maxWidth: 100 },
  { key: 'updatePer', title: '操作人', dataIndex: 'updatePer', width: 100, minWidth: 100, maxWidth: 100 },
  { key: 'operType', title: '操作类型', dataIndex: 'operType', width: 70, minWidth: 70, maxWidth: 100 },
  { key: 'operation', title: '操作内容', dataIndex: 'operation',width: 100, fixed: 'right', align: 'center' }
])
const vdata : any = reactive({
  modalVisible:false,
  isvList: [],  // 表格数据
  visible: false, // 是否显示弹层/抽屉

  detialObj:{} // 操作内容对象
})
// 获取通道数据
function getIfList(params) {
  // req.list(API_URL_IsvInfo_Channel, params).then(res => {
  //   vdata.isvList = res
  // })
  vdata.isvList = [
    {
      id:'1',
      updatePer: 'admin',
      updateTime: '2023-12-07 14:38:00',
      operType:'1'
    },
    {
      id:'2',
      updatePer: 'admin',
      updateTime: '2023-12-07 14:39:00',
      operType:'2'
    }
  ]
}

// 获取通道数据
function viewFun(id) {
  
  // req.list(API_URL_IsvInfo_Channel, params).then(res => {
  //   vdata.isvList = res
  // })
  if(id=='1'){
    vdata.detialObj = {
      editBefore:{},
      editAfter:{
        sqlxNo: 'SQLX00001',
        sqlxName: '商业综合体',
        updatePer: 'admin',
        state:'0',
      }
    }
    vdata.modalVisible=true
    return
  }
  vdata.detialObj = {
    editBefore:{
      sqlxNo: 'SQLX00001',
      sqlxName: '商业综合体',
      updatePer: 'admin',
      state:'1',
    },
    editAfter:{
      sqlxNo: 'SQLX00001',
      sqlxName: '商业综合体',
      updatePer: 'admin',
      state:'0',
    }
  }

  vdata.modalVisible=true
}

function show(recordIdParam) { // 弹层打开事件
  vdata.isvList = []

  getIfList(recordIdParam)

  vdata.visible = true // 立马展示弹层信息
}
function onClose() {
  vdata.visible = false
}


defineExpose({ show })

</script>
